<template>
    <div>
        <Button @click="changeType(1)" :class="{active: forValidate.type === 1 }">新闻分类</Button>
        <Button @click="changeType(2)" :class="{active: forValidate.type === 2 }">上传分类</Button>
        <Button @click="changeType(3)" :class="{active: forValidate.type === 3 }">评论分类</Button>
        <Input v-model="forValidate.title" placeholder="请输入..." style="width: 250px"></Input>      
        <Button type="primary" @click="addData">添加</Button>
        <Button type="primary" @click="removeData">删除</Button>  
        <Button type="primary" @click="updateData">修改</Button>
        <Tree :data="baseData" @on-select-change="getSelectedNodes"></Tree>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // value:'',
                baseData: [],
                cid:null,
                forValidate:{
                    title:'',
                    type:1,
                    parentId:null
                }
            }
        },
        methods:{
            updateData(cid){
                if(cid != null){  //cid不为空，cid为父元素id，添加子节点
                    this.$http({
                        method:'POST',
                        url:`http://localhost:3000/cate/data/`+ this.cid,
                        data:{
                            // parentId:this.cid,
                            title:this.forValidate.title
                            // type:this.forValidate.type
                        }
                    }).then(res => {
                        this.getTree(this.forValidate.type);
                    })
                }
            },
            removeData(cid){
                if(cid != null){
                    this.$http({
                        method:'DELETE',
                        url:`http://localhost:3000/cate/data/` + this.cid,
                        // data:this.formValidate
                    }).then((response) => {
                        // console.log(response);
                        this.formValidate = response.data;
                    })
                    this.baseData.splice(this.cid, 1);
                    this.getTree(this.forValidate.type);
                }
            },
            getSelectedNodes(obj){
                // console.log(obj[0]._id);  //获取点击元素的id
                this.cid = obj[0]._id;
            },
            addData(cid){
                // console.log(this.forValidate.type);
                // console.log(this.forValidate);
                if(cid != null){  //cid不为空，cid为父元素id，添加子节点
                    this.$http({
                        method:'POST',
                        url:`http://localhost:3000/cate/data/`,
                        data:{
                            parentId:this.cid,
                            title:this.forValidate.title,
                            type:this.forValidate.type
                        }
                    }).then(res => {
                        this.getTree(this.forValidate.type);
                    })
                }else{  //添加根节点
                    console.log('aaaaa');
                    this.$http({
                        method:'POST',
                        url:`http://localhost:3000/cate/data/`,
                        data:this.forValidate
                    }).then(res => {
                        this.getTree(this.forValidate.type);
                    })
                }
            },
            changeType(type){
                this.forValidate.type = type;
                this.getTree(type);
            },
            getTree(type){  //刷新
                this.$http({
                    method:'get',
                    url:'http://localhost:3000/cate/list/' + type,
                    data:this.baseData
                }).then(res => {
                    // console.log(res.data)
                    this.baseData = res.data;
                })
            }
        },
        created(){
            this.getTree(1);
        }
    }
</script>

<style scoped>
    .active{
        background:#abcdef;
    }
</style>
